<template>
    <div class="ProjectClass row">
        <div class="col-11 offset-1">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="默认排序" name="0"></el-tab-pane>
                <el-tab-pane label="最强推荐" name="1"></el-tab-pane>
                <el-tab-pane label="收藏最多" name="2"></el-tab-pane>
                <el-tab-pane label="点赞最多" name="3"></el-tab-pane>
            </el-tabs>
            <el-card class="card" shadow="always" :body-style="{ padding: '10px' }" v-for="(item, index) in projectClass"
                :key="item.project_id">
                <el-row>
                    <!-- 图片区域 -->
                    <el-col :span="9"><img class="cardImg" :src="item.icon" /></el-col>
                    <!-- 文本区域 -->
                    <el-col :span="14" style="margin-left: 10px;">
                        <el-container>

                            <!-- 方案标题 -->
                            <el-header style="padding: 0px;height: 70px;">
                                <router-link :to="{ name:'projectdetail',params: {project_id: item.project_id}}" style="text-decoration:none;">
                                    <h4 class="title">{{item.titleName}}</h4>
                                </router-link>
                            </el-header>

                            <!-- 方案简介 -->
                            <el-main style="padding: 0px;">
                                <p class="intro">{{item.intro}}</p>
                            </el-main>

                            <!-- 用户操作区 -->
                            <el-footer style="padding: 0px;">

                                <div id="UserAction" class="clearfix">
                                    <!-- 方案 ID -->
                                    <p class="projectId">ID：{{item.project_id}}</p><br>

                                    <!-- 推荐评分 -->
                                    <el-rate v-model="item.recommend" disabled show-score text-color="#ff9900"
                                        score-template="{value}" style="display: inline;margin-right: 20px;"></el-rate>

                                    <!-- 点赞按钮 -->
                                    <el-button type="text" class="actionButton" @click="btnOperation(item._id, 'like', $event, index)">
                                        <i :class="$store.state.like.indexOf(item._id) != -1 ?'iconfont el-icon-aixin_shixin':'iconfont el-icon-aixin'"></i><span>{{item.like}}</span>
                                    </el-button>

                                    <!-- 收藏按钮 -->
                                    <el-button type="text" class="actionButton" @click="btnOperation(item._id, 'collection', $event, index)">
                                        <i :class="$store.state.collection.indexOf(item._id) != -1 ?'iconfont el-icon-shoucang_shixin':'iconfont el-icon-shoucang'"></i><span>{{item.collect}}</span>
                                    </el-button>


                                </div>
                            </el-footer>
                        </el-container>
                    </el-col>
                </el-row>
            </el-card>
            <!-- 分页按钮 -->
            <el-pagination background @current-change="handleCurrentChange" :current-page="this.params.page" :page-size="this.params.limit"
                layout="prev, pager, next, jumper" :total="this.total"></el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                params: { // Api 请求参数
                    limit: 10, // 每页限制方案数
                    page: 1, // 页码
                    classId: 'all', // 初始请求全部下载全部方案分类
                    sort: 0, // 排序方式为默认
                    level: 0 // 初始请求分类的 level 是全部分类
                },
                total: 0, // 指定方案的数目
                projectClass: [], // 方案分类数据
                url: { // 请求 Api 链接
                    findClass: this.$Global.url.findClass,
                    collectionApi: this.$Global.url.collection,
                    likeApi: this.$Global.url.like
                },
                likeFlag: true, // 点赞图标的切换
                collectionFlag: true, // 收藏图标的切换
                activeName: 0, // 默认排序
            };
        },
        created() {
            // 开发者模式
            // if (process.env.NODE_ENV === "development") {
                this.url.findClass = this.$Global.url.baseUrl + this.$Global.url.findClass;
                this.url.collectionApi = this.$Global.url.baseUrl + this.$Global.url.collection;
                this.url.likeApi = this.$Global.url.baseUrl + this.$Global.url.like;
            // }
            // 组件创建完自动下载方案分类的数据
            this.getClassData();
        },
        watch: {
            // 如果路由有变化，获取路由参数，更新方案分类数据
            "$route"() {
                this.getRouterData();
                // 每次路由跳转都将排序标签页设为默认排序
                this.activeName = '0';
                this.getClassData();
            },
        },
        methods: {
            /**
             * 获取路由传输的参数
             */
            getRouterData() {
                this.params.classId = this.$route.params.classId;
                this.params.class = this.$route.params.class;
                this.params.sort = this.$route.params.sort;
                this.params.page = this.$route.params.page;
                this.params.level = this.$route.params.level;
                // this.activeName = this.$route.params.sort;
            },
            /**
             * 获取方案分类的数据
             */
            getClassData() {
                this.$http.get(this.url.findClass, {
                        params: this.params
                    }).then(response => {
                        if (response.status == 200) {
                            this.projectClass = response.data.docs;
                            // console.log(this.projectClass)
                            this.total = response.data.total;
                            window.scrollTo({
                                top: 0,
                                behavior: "smooth"
                            });
                        } else {
                            console.log('请求数据失败')
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            /**
             * 收藏 & 点赞
             */
            btnOperation(id, operation, event, index) {
                var data = {
                    _id: id
                };
                var url;
                if (operation === 'like') {
                    url = this.url.likeApi;
                } else if (operation === 'collection') {
                    url = this.url.collectionApi;
                }
                this.$http.post(url, data).then(response => {
                        if (response.status == 200) {
                            if (response.data.success) {
                                this.$message(response.data.message);
                                if (operation === 'like') {
                                    this.$store.commit('changeLike', id);
                                } else if (operation === 'collection') {
                                    this.$store.commit('changeCollection', id);
                                }

                                switch (response.data.message) {
                                    case '删除点赞成功':
                                        this.projectClassData[index].like--;
                                        break;
                                    case '添加点赞成功':
                                        this.projectClassData[index].like++;
                                        break;
                                    case '删除收藏成功':
                                        this.projectClassData[index].collect--;
                                        break;
                                    case '添加收藏成功':
                                        this.projectClassData[index].collect++;
                                        break;
                                }
                            } else {
                                this.$message('操作失败');
                            }
                        } else {
                            this.$message('请求失败');
                        }
                    })
                    .catch(error => {
                        // console.log(error);
                        if (error.status == 401) {
                            this.$message({
                                type: 'warning',
                                message: '请登录后尝试！'
                            })
                        }
                    });
            },
            /**
             * 分页改变函数，分页变化时请求指定页数的方案分类数据
             */
            handleCurrentChange(val) {
                this.params.page = val;
                this.getClassData();
                // console.log(`当前页: ${val}`);
            },
            /**
             * 排序改变函数
             */
            handleClick(tab, event) {
                this.params.page = 0;
                this.params.sort = this.activeName;
                this.getClassData();
                console.log(tab, event);
            }
        }
    };
</script>

<style scoped>
    /* 卡片方案展示样式 */

    #ProjectScroll.botton {
        padding: 0px;
    }

    #UserAction {
        position: absolute;
        bottom: 0px;
    }

    #ProjectScroll.image {
        width: auto;
        height: 100%;
        display: block;
    }

    .card {
        margin: 10px;
        min-width: 400px;
    }

    .cardImg {
        width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .title {
        /* 文本省略处理 */
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: black;
    }

    .intro {
        margin: 0px;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }

    .projectId {
        line-height: 14px;
        margin-bottom: 0px;
        display: inline-block;
        position: relative;
        left: 0px;
    }

    .clearfix {
        margin-top: 13px;
        line-height: 12px;
    }

    .actionButton {
        outline: none;
    }
</style>